<style>
.ratingContainer{width:auto;overflow: hidden;padding: 2px;}
div.stars{width: 230px;}
div.stars label{float:left;clear: none;}
div.stars a{display: inline-block;width:31px;height:33px;}
.label-text{padding-top: 10px;}
.comments{padding: 10px 0 0 10px;float:left;}
.rating-white{
	background: url("<?php echo $this->webroot; ?>img/white-star-sign.gif") no-repeat scroll 0 0 transparent;
}
.rating-red{
	background: url("<?php echo $this->webroot; ?>img/red-star-sign.gif") no-repeat scroll 0 0 transparent;
}
.rating-yellow{
	background: url("<?php echo $this->webroot; ?>img/star-sign-yellow.jpg") no-repeat scroll 0 0 transparent;
}
.rating-green{
	background: url("<?php echo $this->webroot; ?>img/star-sign-green.jpg") no-repeat scroll 0 0 transparent;
}
.rating-whitehover{
	background: url("<?php echo $this->webroot; ?>img/white-star-sign.gif") no-repeat scroll 0 0 transparent;
}
.rating-redhover{
	background: url("<?php echo $this->webroot; ?>img/red-star-sign.gif") no-repeat scroll 0 0 transparent;
}
.rating-yellowhover{
	background: url("<?php echo $this->webroot; ?>img/star-sign-yellow.jpg") no-repeat scroll 0 0 transparent;
}
.rating-greenhover{
	background: url("<?php echo $this->webroot; ?>img/star-sign-green.jpg") no-repeat scroll 0 0 transparent;
}
.reason{
	overflow: hidden;
	width: 100%;
}
.reason textarea{
	float:left;
	margin-left: 82px;
}
.contactSellerButton{
	float:right;
}
</style>
<div class="image-slider">
	<h2 class="search-title">Feedback Seller</h2>
	<div>
	<form action="../ratingSave" method="post" id="starForm">
	<input type="hidden" name="data[Rating][seller_userid]" value="<?php echo $products['User']['id'];?>">
	<input type="hidden" name="data[Rating][product_id]" value="<?php echo $products['Product']['id'];?>">
	<input type="hidden" name="data[Rating][buyer_id]" value="<?php echo $session->read('Auth.User.id');?>">
    	<div class="separator ratingContainer">
        	<p class="label-text">Accurate Description :</p>                     
            <div class="rating-status stars" id="accurate">
				<label><input title="Very-Inaccurate" name="data[Rating][accurate_description]" type="radio" value="1"></label>
				<label><input title="Inaccurate" name="data[Rating][accurate_description]" type="radio" value="2"></label>
				<label><input title="Average" name="data[Rating][accurate_description]" type="radio" value="3"></label>
				<label><input title="Accurate" name="data[Rating][accurate_description]" type="radio" value="4"></label>
				<label><input title="Very-Accurate" name="data[Rating][accurate_description]" type="radio" value="5"></label>            
            </div>
            <p class="comments">Very Inaccurate, Inaccurate, Average, Accurate, Very Accurate</p>
	</div>
        <div class="separator ratingContainer">
        	<p class="label-text">Communication :</p>                     
            <div class="rating-status stars" id="communication">
				<label><input title="Poor" name="data[Rating][communication]" type="radio" value="1"></label>
				<label><input title="Below-Average" name="data[Rating][communication]" type="radio" value="2"></label>
				<label><input title="Average" name="data[Rating][communication]" type="radio" value="3"></label>
				<label><input title="Above-Average" name="data[Rating][communication]" type="radio" value="4"></label>
				<label><input title="Excellent" name="data[Rating][communication]" type="radio" value="5"></label>            
		    </div>
		    <p class="comments">Poor, Below Average, Average, Above Average, Excellent</p>
         </div>
                    
		<div class="separator ratingContainer">
            <p class="label-text">Shipping Speed :</p>                     
        	<div class="rating-status stars" id="shipping_speed">
				<label><input title="Very-Slow" name="data[Rating][shipping_speed]" type="radio" value="1"></label>
				<label><input title="Slow" name="data[Rating][shipping_speed]" type="radio" value="2"></label>
				<label><input title="Average" name="data[Rating][shipping_speed]" type="radio" value="3"></label>
				<label><input title="Fast" name="data[Rating][shipping_speed]" type="radio" value="4"></label>
				<label><input title="Very-Fast" name="data[Rating][shipping_speed]" type="radio" value="5"></label>            
            </div>
            <p class="comments">Very Slow, Slow, Average, Fast, Very Fast</p>
        </div>
		<div class="separator ratingContainer">
            <p class="label-text">Would you recommend this Seller :</p>
    		<div class="rating-status stars" id="recommend_seller">
				<label><input title="Definitely-Not" name="data[Rating][recommend_seller]" type="radio" value="1"></label>
				<label><input title="No" name="data[Rating][recommend_seller]" type="radio" value="2"></label>
				<label><input title="Maybe" name="data[Rating][recommend_seller]" type="radio" value="3"></label>
				<label><input title="Yes" name="data[Rating][recommend_seller]" type="radio" value="4"></label>
				<label><input title="Definitely-Yes" name="data[Rating][recommend_seller]" type="radio" value="5"></label>            
            </div>
            <p class="comments">Definitely Not, No, Maybe, Yes, Definitely Yes</p>
		</div>
		<div class="separator ratingContainer" style="text-align: right;">
			<input type="submit" value="Submit Feedback" name="feedbackSubmit" />
		</div>
	</form>
	</div>
</div>

<script type="text/javascript">
var starRating = {

		create: function(selector) {
			jQuery(selector).each(function(j) {
				var list = jQuery('<div></div>');
				jQuery(this).find('input:radio').each(function(i){
					//var rating = jQuery(this).attr('id');
					var rating = jQuery(this).val();
					var ratingValue=jQuery(this).attr('title');
					var item = jQuery('<a href="#"></a>').attr({title: ratingValue, rId: rating}).addClass('rating-white');
					
					starRating.addHandlers(item);
					var cName=starRating.className(rating);
					list.append(item);
					if (jQuery(this).is(':checked')){
							item.closest('label').prevAll().find('a').addClass(cName);
						}
					});
				jQuery(this).append(list).find('input:radio').hide();	
				});
		},

		addHandlers: function(item) {

			jQuery(item).click(function(e) {
	
			// Handle star click
				var star=jQuery(this);
				var allLinks = jQuery(this).closest('label');
				var cName = starRating.className(star.attr('rId'));
				allLinks.find('input:radio[value=' + star.attr('rId') + ']').attr('checked', true);
			// Set the ratings
				jQuery(this).closest('div.stars').find('a').removeAttr('class');
				jQuery(this).closest('div.stars').find('a').addClass('rating-white');
				jQuery(this).closest('label').prevAll().find('a').addClass(cName);
				jQuery(this).addClass(cName);

				starRating.dropBox(star.attr('rId'), jQuery(this));
					
				e.preventDefault();				
			})
	
			.hover(function() {
			// Handle star hover over
				var cName=starRating.className(jQuery(this).attr('rId'));
				jQuery(this).closest('label').prevAll().find('a').addClass(cName+"hover");
				jQuery(this).closest('label').nextAll().find('a').addClass("rating-whitehover");
				jQuery(this).addClass(cName+"hover");
	
			},function() {
			// Handle star hover out
				var cName=starRating.className(jQuery(this).attr('rId'));
				jQuery(this).closest('label').prevAll().find('a').removeClass(cName+"hover");
				jQuery(this).closest('label').nextAll().find('a').removeClass("rating-whitehover");
				jQuery(this).removeClass(cName+"hover");
				
			});

		},
		className: function(value){
			switch(value){
				case '1':
					return 'rating-red';
					break;
				case '2':
					return 'rating-red';
					break;
				case '3':
					return 'rating-yellow';
					break;
				case '4':
					return 'rating-green';
					break;
				case '5':
					return 'rating-green';
					break;
				default:
					return 'rating-white';
			}
		},
		dropBox: function(value, obj){
			/*if(obj.closest('.stars').next().hasClass('reason')===true){
				alert(this);
			}*/
			obj.closest('.ratingContainer').find('div.reason').remove();
			var name="data[Rating]["+obj.parents('div.stars').attr('id')+"_reason]";
			var text='<div class="reason"><textarea rows="2" cols="20" name=' +name+ '>Describe a reason you are placing this rating</textarea><a href="javascript:void(0)" elmid="<?php echo $products['Product']['id'];?>" controller="products" action="contact_seller" onclick="showPop(this)"><input type="button" value="Contact Seller" name="contactSeller" class="contactSellerButton" /></div>';
			if(value<3){
				obj.closest('.ratingContainer').append(text);
			}
		}


		};

jQuery(document).ready(function(){

	starRating.create(jQuery('.stars label'));
	jQuery('input:submit[name="feedbackSubmit"]').live('click', function(){
	var dataString=jQuery('#starForm').serialize();
	jQuery.ajax({  
			type: "POST",  
			url: "../ratingSave",
			data: dataString,  
			success: function(data) {  
			//display message back to user here
				//jQuery('#starForm').parent('div').append('<h3>'+data+'</h3>');
                                alert(data);
			}  
		}); 
		return false;
	});
});

</script>